<template>
  <!-- 用车申请审批 -->
  <base-audit :callbackFn="beforeSubmit" :beforeSubmitFn="hadleSubmit" :isNeedDetails="false">
    <template v-slot:extraMiddle>
      <a-spin :spinning="loading">
        <a-card :bordered="false">
          <title-name title="用车申请信息"></title-name>
          <custom-form isValidate :formList="formList" :form="form" editModel="V">
            <!-- 人员 -->
            <template #usePersonId>
              <a-tag
                class="mb12"
                v-for="person in form.usePersonId"
                :key="person.userId"
                :closable="false"
                color="#108ee9"
                >
{{ person.name }}
</a-tag
              >
            </template>
          </custom-form>
        </a-card>
        <a-card :bordered="false">
          <title-name title="调度车辆"></title-name>
          <a-row type="flex">
            <div align="right" :class="{ del_btn: carProcess == 1 }" style="width: 130px">
              {{ carProcess == 1 ? '已调度车辆：' : '选择车辆' }}：
            </div>
            <div style="width: calc(100% - 130px)">
              <!-- 调度车辆 -->
              <a-checkbox-group v-model="vehicle" :options="options" style="width: 100%" v-if="carProcess == 0">
                <a-row type="flex" align="middle" slot="label" slot-scope="item" style="width: 100%">
                  <a-col :span="10" class="chooseItem" :class="{ chooseVehiche: vehicle.includes(item.value) }">
                    <a-row type="flex" justify="start">
                      <ellipsis tooltip :length="10" class="preffix">{{ item.carNumber }}</ellipsis>
                      <ellipsis tooltip :length="66" style="padding-left: 12px"
                        >
{{ item.brand }} | {{ item.carTypeName }} | 随车司机：{{ item.driverName || '无' }}&nbsp;
                        {{ item.phone }}
</ellipsis
                      >
                    </a-row>
                  </a-col>
                  <a-col :span="14" v-if="item.timeAndForbid && item.timeAndForbid.length > 0">
                    <div class="time_item" v-for="(i, t) in item.timeAndForbid" :key="t">
                      【{{ i.time }}】
                      <span :class="{ del_btn: i.mar }">{{ i.mar ? '限行' : '不限行' }}</span>
                      ，当日其他出车任务：
                      <span v-for="(u, m) in i.list" :key="m" :class="{ time_active: u.mar }"
                        >{{ u.time }}{{ u.mar ? '（审核中）' : '' }}<span v-if="i.list.length - 1 != m">、</span></span
                      >
                      <span v-if="!i.list || i.list.length === 0">无</span>
                    </div>
                  </a-col>
                </a-row>
              </a-checkbox-group>
              <!-- 查看已调度车辆 -->
              <template v-if="carProcess == 1">
                <a-row
                  type="flex"
                  v-for="item in form.carDispatchRecords"
                  :key="item.id"
                  align="middle"
                  style="width: 100%;margin-bottom:32px"
                >
                  <a-col :span="12" class="chooseItem">
                    <a-row type="flex" justify="start">
                      <ellipsis tooltip :length="10" class="preffix">{{ item.carInfo.carNumber }}</ellipsis>
                      <ellipsis tooltip :length="66" style="padding-left: 12px"
                        >
{{ item.carInfo.brand }} | {{ item.carInfo.carType }} | 随车司机：{{
                          item.carInfo.driverName || '无'
                        }}
                        {{ item.carInfo.phone }}
</ellipsis
                      >
                    </a-row>
                    <span class="del_btn" v-if="!item.carInfo.driverName || item.carInfo.driverState === '0'">{{ item.carInfo.driverState === '0' ? '该车辆随车司机不可用' : '该车辆无随车司机' }}</span>
                  </a-col>
                </a-row>
              </template>
              <a-empty
                v-if="
                  (carProcess == 1 && (!form.carDispatchRecords || form.carDispatchRecords.length === 0)) ||
                  (carProcess == 0 && options.length === 0)
                "
                description="暂无调度车辆"
              />
            </div>
          </a-row>
        </a-card>
      </a-spin>
    </template>
  </base-audit>
</template>

<script>
import BaseAudit from './BaseAudit'
import { carApplication, carDispatchRecord } from '@/api/office/vehicle/config' // api
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import { Ellipsis } from '@/components' // 表格
import { Empty } from 'ant-design-vue'

export default {
  extends: new BaseEditPage(),
  components: {
    BaseAudit,
    Ellipsis,
    AEmpty: Empty
  },
  data() {
    return {
      form: { usePersonId: [] }, // 表单
      loading: false, // loading
      options: [], // 调度车辆
      vehicle: [] // 选中调度车辆
    }
  },
  mounted() {
    this.init()
  },
  computed: {
    formList() {
      return [
        {
          keyName: 'unitName',
          label: '申请单位'
        },
        {
          keyName: 'departmentName',
          label: '申请部门'
        },
        {
          keyName: 'personName',
          label: '申请人'
        },
        {
          keyName: 'phone',
          label: '通知电话'
        },
        {
          keyName: 'address',
          label: '目的地'
        },
        {
          keyName: 'time',
          label: '往返时间',
          customRender() {
            return arguments[1].goTime && arguments[1].comeTime
              ? arguments[1].goTime + '至' + arguments[1].comeTime
              : '无'
          }
        },
        {
          keyName: 'requirement',
          label: '车型要求'
        },
        {
          keyName: 'usePersonId',
          label: '用车人员',
          slot: true,
          span: 24
        },
        {
          keyName: 'subjectMatter',
          label: '事由',
          span: 24
        }
      ]
    }
  },
  methods: {
    /**
     * 初始化
     */
    init() {
      let name = ['processDetail', 'detail'][this.carProcess]
      this.loading = true
      carApplication[name]({ id: this.id })
        .then((res) => {
          this.loading = false
          let carApplication = [res.data?.carApplication, res.data][this.carProcess]
          // 设置往返时间
          if (carApplication.goTime && carApplication.comeTime) {
            carApplication.time = [carApplication.goTime, carApplication.comeTime]
          }
          // 格式化人员
          if (carApplication.usePersonId?.length > 0) {
            carApplication.usePersonId = carApplication.usePersonId?.split(',')?.map((item, index) => ({
              userId: item,
              name: carApplication.usePersonNames?.split(';')[index]
            }))
          } else {
            carApplication.usePersonId = []
          }
          this.form = carApplication
          if (res.data?.carInfos.length > 0) {
            res.data?.carInfos.forEach((item) => {
              item.value = item.id
            })
            this.options = res.data.carInfos
          }
        })
        .catch(() => {
          this.loading = false
        })
    },
    /**
     * 提交调度校验
     */
    beforeSubmit(e) {
      if (this.vehicle.length === 0 && this.carProcess == 0 && e === 'approval') {
        this.$message.warning('请选择调度车辆')
      }
      return this.vehicle.length > 0 || this.carProcess == 1 || e === 'unApproval'
    },
    /**
     * 提交调度
     */
    hadleSubmit(e) {
      if (this.carProcess == 0 && e.agree) {
        let form = this.vehicle.map((item) => ({
          applicationId: this.id,
          carId: item
        }))
        return carDispatchRecord.createBatch(form)
      } else {
        return new Promise((resolve) => {
          resolve(true)
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-checkbox-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

/deep/ .ant-checkbox-group-item {
  margin-right: 0 !important;
}

.chooseItem {
  // width: 50%;
  border: 1px solid #ccc;
  border-radius: 4px;
  line-height: 30px;
  height: 34px;
  .preffix {
    width: 120px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 3px;
    line-height: 30px;
    background: #ccc;
  }
}
.chooseVehiche {
  border: 1px solid #40a9ff;
  .preffix {
    border: 1px solid #40a9ff;
    background: #40a9ff;
    color: #fff;
  }
}
/deep/ .ant-checkbox + span {
  display: inline-block;
  width: 100%;
}

.time_item {
  font-size: 13px;
  padding-left: 12px;
}

// 审核中时间
.time_active {
  color: #ffa100;
}
</style>